import React, { useState } from 'react';
import { Box, Pill, SecondaryButton, Text, ThemeColorType } from '@nova-hf/ui';
import { IconType } from '@nova-hf/ui/umd/ts/src/icon-library/iconMap';
import { SectionHeader } from 'beta/pages/thjonustur/[serviceId]/comoponents/SectionHeader';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { PaymentDefaultStatus, usePaymentDefaultsQuery } from 'typings/graphql';

type StatusInfo = {
  color: ThemeColorType;
  icon: IconType;
  text: string;
};

type DefaultsProps = {
  backupContractId?: string;
};

const ContractDefaultsContainer = ({ backupContractId }: DefaultsProps) => {
  const { t } = useTranslation('containers');
  const router = useRouter();
  const contractId =
    typeof router?.query?.contractId === 'string' ? router?.query?.contractId : backupContractId;
  const bannerView = backupContractId && backupContractId.length;
  const [showDefaults, setShowDefaults] = useState(!bannerView);

  const { data, loading, error } = usePaymentDefaultsQuery({
    variables: {
      input: {
        contractId: contractId ?? '',
      },
    },
    skip: !contractId,
  });

  const defaults = data?.paymentDefaults?.paymentDefaults;

  const getStatusInfo = (status: PaymentDefaultStatus): StatusInfo | undefined | string => {
    if (status === PaymentDefaultStatus.Resolved) {
      return {
        color: 'success',
        icon: 'checkMark',
        text: t('contractDefaultsContainer.processed'),
      };
    }
    if (status === PaymentDefaultStatus.Active) {
      return { color: 'warning', icon: 'close', text: t('contractDefaultsContainer.noDate') };
    }
    if (status === PaymentDefaultStatus.Unknown) {
      return {
        color: 'yellow',
        icon: 'return',
        text: PaymentDefaultStatus.Unknown.toString(),
      };
    }

    return undefined;
  };

  if (!data || error || loading || !defaults?.length) {
    return null;
  }

  return (
    <Box>
      <Box display="flex" flexDirection="column" gap={2}>
        <Box>
          <SectionHeader
            headerTitle={bannerView ? '' : t('contractDefaultsContainer.defaults')}
            rightActionNode={
              <SecondaryButton
                colorScheme={'purple'}
                icon={showDefaults ? 'minus' : 'add'}
                text={
                  showDefaults
                    ? t('contractItemsContainer.hide')
                    : bannerView
                    ? t('contractItemsContainer.showTwo')
                    : t('contractItemsContainer.show')
                }
                onClick={() => setShowDefaults(!showDefaults)}
              />
            }
          />
        </Box>
        {showDefaults && (
          <Box>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={3} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">
                  {t('contractDefaultsContainer.headers.defaultedAt')}
                </Text>
                <Text variant="eyebrowSmall">{t('contractDefaultsContainer.headers.status')}</Text>
                <Text variant="eyebrowSmall">
                  {t('contractDefaultsContainer.headers.externalInvoiceId')}
                </Text>
              </Box>
            </Box>
            {defaults?.map((item) => (
              <React.Fragment key={item?.id}>
                <Box display="grid" gridTemplateColumns={3} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">
                    {item?.defaultedAt
                      ? formatDate(item?.defaultedAt, 'dd.MM.yyyy')
                      : t('contractDefaultsContainer.noDate')}
                  </Text>
                  <Pill
                    text={getStatusInfo(item?.status ?? '')?.text ?? ''}
                    color={getStatusInfo(item?.status ?? '')?.color}
                    maxWidth="fitContent"
                    icon={{
                      icon: getStatusInfo(item?.status ?? '')?.icon,
                      color: item?.status === PaymentDefaultStatus.Unknown ? 'black100' : 'white',
                      size: 16,
                    }}
                  />
                  <Text variant="pSmallRegular">{item?.externalInvoiceId}</Text>
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default inject('ui', 'authentication')(observer(ContractDefaultsContainer));